<template>
  <div>
    <vxe-toolbar custom print export>
      <template v-slot:buttons>
        <a-button type="primary" @click="jumpAdd">
          <PlusOutlined />
          发起新流程
        </a-button>
      </template>
    </vxe-toolbar>
    <panel title="流程列表">
      <vxe-table
        border
        resizable
        show-overflow
        row-id="id"
        size="small"
        :loading="loading"
        :data="tableData"
      >
        <vxe-table-column width="50px" type="seq"></vxe-table-column>

        <!-- :key="item.field"
            :align="item.algin"
            v-if="item.isVisible"
            :width="item.width"
            :title="item.lable" -->
        <vxe-table-column min-width="85px" title="标题">
          <template v-slot="{ row }">
            <a @click="jumpStartFlow(row.TaskId)">{{ row.TaskTitle }}</a>
          </template>
        </vxe-table-column>

        <template v-for="item in cloumData">
          <vxe-table-column
            v-if="!item.isHiddin && item.isJump"
            :align="item.algin"
            :width="item.width"
            :key="item.value"
            :title="item.lable"
          >
            <template v-slot="{ row }">
              <a @click="jumpStartFlow(row.TaskId)">{{ row[item.value] }}</a>
            </template>
          </vxe-table-column>
          <vxe-table-column
            v-else-if="!item.isHiddin"
            :align="item.algin"
            :width="item.width"
            :key="item.value"
            :title="item.lable"
            :field="item.value"
          ></vxe-table-column>
        </template>
        <vxe-table-column
          title="创建时间"
          field="CreationTime"
          :formatter="formatDateTime"
        ></vxe-table-column>
        <vxe-table-column title="状态">
          <template v-slot="{ row }">
            <span v-if="row.state === 0" class="green">● 已处理</span>
            <span v-else-if="row.state === 1" class="waring">● 待处理</span>
          </template>
        </vxe-table-column>
        <vxe-table-column
          width="100px"
          align="center"
          title="操作"
          fixed="right"
        >
          <template v-slot="{ row }">
            <div v-if="row.state === 0">
              <a @click="jumpDetail(row)">查看详细</a>
            </div>
            <div v-else>
              <a @click="jumpStartFlow(row.TaskId)">处理</a>
              <span v-if="row.isdelete">
                <a-divider type="vertical" />
                <a @click="hangleDelete(row.TaskId)">作废</a>
              </span>
            </div>
          </template>
        </vxe-table-column>
      </vxe-table>
      <vxe-pager
        background
        size="small"
        :loading="loading"
        :current-page="tablePage.currentPage"
        :page-size="tablePage.pageSize"
        :total="tablePage.totalResult"
        :layouts="[
          'PrevPage',
          'JumpNumber',
          'NextPage',
          'FullJump',
          'Sizes',
          'Total',
        ]"
        @page-change="handlePageChange"
      ></vxe-pager>
    </panel>
  </div>
</template>
<script>
  import { Getflowdata, Getflowdatasetting } from '@/api/flow/api'
  import { Deletetask } from '@/api/flowtask/api'
  import { formatDateTime } from '@/utils/public/tableformat'
  import { PlusOutlined } from '@ant-design/icons-vue'

  export default {
    data() {
      return {
        loading: false,
        tableData: [],
        tablePage: {
          currentPage: 1,
          pageSize: 10,
          totalResult: 0,
        },
        cloumData: [],
      }
    },
    components: {
      PlusOutlined,
    },
    created() {
      this.flowId = this.$route.query.id
      this.getData()
    },
    methods: {
      formatDateTime,
      getData() {
        this.loading = true
        const queryData = {
          SkipCount: this.tablePage.currentPage,
          MaxResultCount: this.tablePage.pageSize,
          FlowId: this.flowId,
        }

        Getflowdatasetting({ FlowId: this.flowId }).then((res) => {
          if (res.isSuccess) {
            console.log('cloumData', res)
            this.cloumData = res.content
          }
        })
        Getflowdata(queryData).then((res) => {
          console.log('tableData', res)
          if (res.isSuccess) {
            this.tableData = res.content.items
            this.tablePage.totalResult = res.content.totalCount
            this.loading = false
          } else {
            console.log('error', res)
            this.$message.error('请求出错了，请刷新重试')
          }
        })
      },
      // 处理流程
      jumpStartFlow(taskId) {
        console.log(taskId)
        this.$router
          .push({
            path: '/workbench/startFlow',
            query: {
              id: this.flowId,
              taskId: taskId,
            },
          })
          .catch((err) => {
            console.log(err)
          })
      },
      // 删除
      hangleDelete(taskId) {
        var that = this
        this.$confirm({
          title: '提示',
          content: '是否删除该数据？',
          onOk: () => {
            Deletetask({ taskId: taskId })
              .then((res) => {
                console.log('作废', res)
                if (res.isSuccess) {
                  that.$message.success('作废成功！')
                  that.getData()
                }
              })
              .catch((err) => {
                console.log(err)
              })
          },
        })
      },
      // 编辑流程
      jumpAdd() {
        this.$router
          .push({
            path: '/workbench/startFlow',
            query: {
              id: this.flowId,
            },
          })
          .catch((err) => {
            console.log(err)
          })
      },
      // 跳转此流程列表
      jumpDetail(row) {
        console.log(row)
        this.$router
          .push({
            path: '/workbench/detailed',
            query: {
              flowId: this.flowId,
              taskId: row.TaskId,
              groupId: row.GroupId,
              tabTitle: row.TaskTitle,
            },
          })
          .catch((err) => {
            console.log(err)
          })
      },

      // //删除流程
      // jumpDelete(id) {
      //   var that = this
      //   this.$confirm({
      //     title: '提示',
      //     content: '是否删除该数据？',
      //     onOk: () => {
      //       Delete({ id: id })
      //         .then((res) => {
      //           that.$message.success('删除成功！')
      //           that.getData()
      //         })
      //         .catch((err) => {
      //           console.log(err)
      //         })
      //     },
      //   })
      // },

      // table翻页事件
      handlePageChange({ currentPage, pageSize }) {
        this.tablePage.currentPage = currentPage
        this.tablePage.pageSize = pageSize
        this.getData()
      },
    },
  }
</script>

<style>
  .ant-pro-page-header-wrap-children-content {
    margin: 0px 24px;
  }
</style>
